<!-- 字典编辑弹窗 -->
<template>
  <ele-modal
    :width="1000"
    title="操作日志详情"
    :model-value="modelValue"
    @update:model-value="updateModelValue"
  >
    <el-descriptions>
      <el-descriptions-item label="操作类型" :min-width="300">{{ data.title }}</el-descriptions-item>
      <el-descriptions-item label="操作账号" :min-width="300">{{ data.username }}</el-descriptions-item>
      <el-descriptions-item label="请求方法" :min-width="300">{{ data.method }}</el-descriptions-item>
      <el-descriptions-item label="操作模块" :min-width="300">{{ data.module }}</el-descriptions-item>
      <el-descriptions-item label="IP地址" :min-width="300">{{ data.ip }}</el-descriptions-item>
      <el-descriptions-item label="IP所属地" :min-width="300">{{ data.ip_city }}</el-descriptions-item>
      <el-descriptions-item label="操作系统" :min-width="300">{{ data.os }}</el-descriptions-item>
      <el-descriptions-item label="浏览器" :min-width="300">{{ data.browser }}</el-descriptions-item>
      <el-descriptions-item label="操作时间">{{ formatDate(data.create_time, 'YYYY-MM-DD HH:mm:ss') }}</el-descriptions-item>
      <el-descriptions-item label="请求地址" :min-width="300" span="3"><ele-copyable>{{ data.url }}</ele-copyable></el-descriptions-item>
      <el-descriptions-item label="请求参数" :min-width="300" span="3"><ele-copyable>{{ data.param }}</ele-copyable></el-descriptions-item>
      <el-descriptions-item label="请求响应" :min-width="300" span="3"><ele-copyable v-if="data.content">{{ data.content }}</ele-copyable></el-descriptions-item>
    </el-descriptions>
  </ele-modal>
</template>

<script setup>
defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object,
})
const emit = defineEmits(['done', 'update:modelValue'])

const { formatDate } = utils
/** 弹窗是否打开 */
const modelValue = defineModel()

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}
</script>
